<template>
  <el-container>
    <el-container>
      <el-aside width="200px">
        <el-button @click="add"> add </el-button>
        <el-button @click="replace"> Replace </el-button>

        <draggable :list="list" v-bind="dragOptions" :move="checkMove">
          <div class="list-group-item" v-for="(element, index) in list" :key="element.name">{{ element.name }} {{ index }}</div>
        </draggable>
      </el-aside>
      <el-main>
        <draggable :list="list2" tag="ul" v-bind="dragOptions2">
          <!-- <transition-group> -->
          <li v-for="(el, idx) in list2" :key="el.name + idx">
            <el-card>
              {{ !!el.children }}
              <r-nested-draggable v-if="el.children" :children="el.children" />
            </el-card>

            <!-- <el-button icon="el-icon-delete" type="text" @click="removeAt(idx)"></el-button> -->
          </li>
          <!-- </transition-group> -->
        </draggable>
        <!-- <draggable :list="list" :disabled="!enabled" :move="checkMove" @start="dragging = true" @end="dragging = false" v-bind="dragOptions">
          <transition-group>
            <div v-for="(element, idx) in list" :key="element.name">
              <el-card>
                {{ element.name }}
                <el-button icon="el-icon-delete" type="text" @click="removeAt(idx)"></el-button>
              </el-card>
            </div>
          </transition-group>
        </draggable> -->
      </el-main>
    </el-container>

    <el-footer>
      <r-displayer :value="list2" title="List" />
    </el-footer>
  </el-container>
</template>

<script>
import draggable from 'vuedraggable'

let id = 1
export default {
  name: 'simple',
  components: {
    draggable
  },
  data() {
    return {
      enabled: true,
      list2: [
        { name: 'aa', id: 0, children: [{ name: 'bb', id: 1, children: [] }] },
        { name: 'cc', id: 2, children: [] }
      ],
      list: [
        { name: 'a', id: 0 },
        { name: 'c', id: 2 }
      ],
      dragging: false
    }
  },
  computed: {
    draggingInfo() {
      return this.dragging ? 'under drag' : ''
    },
    dragOptions() {
      return {
        animation: 200,
        group: {
          name: 'component',
          pull: 'clone',
          put: false
        },
        disabled: false,
        ghostClass: 'ghost',
        chosenClass: 'chosen'
      }
    },
    dragOptions2() {
      return {
        animation: 200,
        group: {
          name: 'component'
        },
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  },
  methods: {
    add: function () {
      this.list.push({ name: 'Juan ' + id, id: id++, children: [] })
    },
    removeAt(idx) {
      this.list.splice(idx, 1)
    },
    replace: function () {
      this.list = [{ name: 'Edgard', id: id++, children: [] }]
    },
    checkMove: function (e) {
      window.console.log('Future index: ' + e.draggedContext.futureIndex)
    },
    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element
      const draggedElement = draggedContext.element
      return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
    }
  }
}
</script>
<style scoped>
.buttons {
  margin-top: 35px;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
